<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			header{
				width: 100%;
				height: 100px;
				font-size: 40px;
				color: orangered;
				text-align: center;
				background-color: yellow;
			}			
			.nav{
				width: 100%;
				height: 100px;
				font-size: 20px;
				color: red;
				text-align: center;
				background-color: olivedrab;
			}
			.goodsList{
				width: 80%;
				background-color: burlywood;
				margin: 0 auto;
				overflow: hidden;
				
			}
			.goodsList li{
				float: left;
				width: 19%;
				background-color: red;
				margin:0.5%;
				height: 400px;
			}

			.goodsList img{
				width: 100%;
				height: 320px;
				
			}				
			.goodsList p{
				height: 40px;
				font-size: 12px;
				color: black;
			}	
	
		</style>
	</head>
	<body>
		<header>首页</header>
		<div class="nav">
			<a href="register.html" name="register" class="register">注册</a>
			<a href="login.html" name="login" class="login">登录</a>
			<a href="#" name="username" class="username">未登录 </a>
			<!-- 可以在a链接里面写javascript代码，在href属性中以javascript:开头，后面写js代码 -->
			<a href="javascript:localStorage.clear(); location.reload();" class="logout">退出</a>
		</div>
		<!--热门商品-->
		<ul class="goodsList">
			
		</ul>

	</body>
	<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		//判断用户名如果存在, 则显示用户名并显示退出按钮, 否则显示注册和登录
		if (localStorage.username) {

			$('a[name=username]').html(localStorage.username);
			
		} 
		
//			显示商品列表	
		function goods(){
			$.ajax({
				type:"post",
				url:"http://h6.duchengjiu.top/shop/api_goods.php",
				async:true,
				success:function(data){
					console.log(data);
					var tu = '';
					var goods ='';
					for(var i=0;i<10;i++){		
						var obj = data.data[i];
						 tu = '<li><img src = '+obj.goods_thumb+' /><p>'+obj.goods_name+'</p><p>价格：'+obj.price+'</p></li>';
						 goods += '<a href=goods.html?goods_id='+obj.goods_id+'>'+tu+'</a>'
					}
					$(".goodsList").html(goods);
				}
			});
		}
		goods();
	</script>
</html>
